// 渲染主页面逻辑

import Header from '../../components/Header';
import LeftTree from '../../../../public/components/LeftTree';
import AddNewPage from '../../components/AddNewPage';
import MainTable from '../../components/MainTable';

import language from '../../language';

import {base} from 'nc-lightapp-front';
import EmptyPage from '../../../../../hrpub/common/components/emptyImg';
import instant from '../../instant';

import {getColor} from '../../../../../hrpub/common/utils/utils';

const {
    NCButtonGroup,
    NCButton, 
    NCCheckbox,
    NCTooltip
} = base;

export default function renderPage() {
    const {
        button, DragWidthCom
    } = this.props;
    const {
        humanResourceOrganizationValue,
        page,
        hasSearched,
        selectedRows,
        pageInfo,
        showTableCheckbox,
        addPageTemplate,
        pageFrom,
        leftTreeType,
        show_on_job_psn,
        include_child_orgs,
        include_child_depts,
        imageData,
        subTableEditable,
        include_cancle_dept,
        disableUpload,
        mainTableHeight,
        subsetVisible,
        subsetCheckboxDisabled,
        pageHeight,
        subHeight,
        showSubsetChecked,
        photoRequired,
        isShowCardPag,
        photoConf
    } = this.state;


    let orgRangeClass = leftTreeType === 'orgRange' ? 'primary' : 'normal';
    let psnTypeClass = leftTreeType === 'psnType' ? 'primary' : 'normal';

    let color = getColor().color;
    let darkTheme = document.body.className.includes('c-lightapp-front-black');

    if (page === 'main' || page === 'adjust-sort') {
        return (
            <div className="main-page">
                <Header
                    {...this.props}
                    pageInfo={pageInfo}
                    page={page}
                    ref={ref => this.headerRef = ref}
                    updateState={this.updateState}
                    humanResourceOrganizationValue={humanResourceOrganizationValue}
                    getMainTableData={this.getMainTableData}
                    hasSearched={hasSearched}
                    selectedRows={selectedRows}
                    getRef={this.getRef}
                    toEditPage={this.toEditPage}
                    deleteMainTableRow={this.deleteMainTableRow}
                    batchAddSub={this.batchAddSub}
                    exportPhoto={this.exportPhoto}
                    showHisJobModal={this.showHisJobModal}
                    showReportTo={this.showReportTo}
                    createUser={this.createUser}
                    show_on_job_psn={show_on_job_psn}
                    include_child_orgs={include_child_orgs}
                    include_child_depts={include_child_depts}
                    goBackToMainPage={this.goBackToMainPage}
                    importPhotos={this.importPhotos}
                    print={this.print}
                    fileManager={this.fileManager}
                    printOutput={this.printOutput}
                    exportPsn={this.exportPsn}
                    setButtonStatus2={this.setButtonStatus2}
                    insRef={this.insRef}
                    subsetCheckboxDisabled={subsetCheckboxDisabled}
                    showSubsetChecked={showSubsetChecked}
                    previewCard={this.previewCard}
                />
                <div className="tree-table entry-mng-page-content"
                style={{display: humanResourceOrganizationValue.refpk ? 'block' : 'none'}}>
                <DragWidthCom
                leftDom={
                    <div
                    className="left-content"
                    style={{
                        height: !subsetVisible ? `${pageHeight - 46}px` : `100%`, 
                        display: humanResourceOrganizationValue.refpk ? 'block' : 'none',
                        borderColor: darkTheme ? '#39393f' : '#d7d7d7'
                    }}
                >
                    {
                        humanResourceOrganizationValue.refpk &&
                        <div className="left-content-show-type">
                            <label
                                style={{
                                    color: color
                                }}
                            >
                                {language['hi6007-000063']}:
                            </label>{/* 国际化处理： 展示方式*/}
                            <NCButtonGroup>
                                <NCTooltip
                                    overlay={<div>{language['hi6007-000064']}</div>}
                                    placement="top"
                                >
                                    <NCButton
                                        className="left-tree-button"
                                        colors={orgRangeClass}
                                        onClick={this.toggleLeftTreeType('orgRange')}
                                        inverse
                                    >
                                        {language['hi6007-000064']}{/* 国际化处理： 管理范围*/}
                                    </NCButton>
                                </NCTooltip>
                                <NCTooltip
                                    overlay={<div>{language['hi6007-000065']}</div>}
                                    placement="top"
                                >
                                    <NCButton
                                        className="left-tree-button"
                                        colors={psnTypeClass}
                                        onClick={this.toggleLeftTreeType('psnType')}
                                        inverse
                                    >
                                        {language['hi6007-000065']}{/* 国际化处理： 人员类别*/}
                                    </NCButton>
                                </NCTooltip>
                            </NCButtonGroup>
                        </div>
                    }

                    <div
                        className="left-tree-wrapper"
                    >
                        <LeftTree
                            {...this.props}
                            treeType={leftTreeType}
                            asyncTree={this.props.asyncTree}
                            onSelect={this.selectTree}
                            pk_org={humanResourceOrganizationValue.refpk}
                            treeId="departmentTree"
                            MultiInit={this.props.MultiInit}
                            include_cancle_dept={include_cancle_dept}
                            onCancelClick={this.onLeftTreeCancelClick}
                            instant={instant}
                        />
                    </div>
                    {
                        humanResourceOrganizationValue.refpk &&
                        leftTreeType === 'orgRange' &&
                        <div className="include-cancel-dept-line">
                            <NCCheckbox
                                color="primary"
                                onChange={(value) => {
                                    this.setState({
                                        include_cancle_dept: value
                                    });
                                }}
                                checked={include_cancle_dept}
                            >
                                {language['hi6007-000097']/** 包含已撤销部门 */}
                            </NCCheckbox>
                        </div>
                    }
                    </div>
                }
                rightDom={
                    <div
                        className="right-content"
                        ref={ref => instant.rightRef = ref}
                        style={{
                            // marginLeft: humanResourceOrganizationValue.refpk ? '250px' : '0',
                            width: humanResourceOrganizationValue.refpk ? 'auto' : '100%'
                        }}
                    >
                        {
                            humanResourceOrganizationValue.refpk ?
                                <MainTable
                                    {...this.props}
                                    updateState={this.updateState}
                                    handleTableSelect={this.handleTableSelect}
                                    getMainTableData={this.getMainTableData}
                                    pageInfo={pageInfo}
                                    showTableCheckbox={showTableCheckbox}
                                    toEditPage={this.toEditPage}
                                    selectAll={this.selectAll}
                                    mainTableHeight={mainTableHeight}
                                    page={page}
                                    insRef={this.insRef}
                                    subsetVisible={subsetVisible}
                                    pageHeight={pageHeight}
                                    subHeight={subHeight}
                                /> :
                                <EmptyPage
                                    height={456}
                                    text={language['hi6007-000191']/**暂无数据，请先选择人力组织 */}
                                />
                        }
                    </div>
                }
                defLeftWid='20%'    // 默认左侧区域宽度，px/百分百
                leftMinWid='180px'
                />
                </div>
            </div>
        );
    } else if (page === 'add-new') {
        return (
            <AddNewPage
                {...this.props}
                updateState={this.updateState}
                addPageTemplate={addPageTemplate}
                goBackToMainPage={this.goBackToMainPage}
                pageFrom={pageFrom}
                isShowCardPag={isShowCardPag}
                humanResourceOrganizationValue={humanResourceOrganizationValue}
                copyRow={this.copyRow}
                deleteRow={this.deleteRow}
                addRow={this.addRow}
                imageData={imageData}
                subTableEditable={subTableEditable}
                getModifyData={this.getModifyData}
                selectedRows={selectedRows}
                cancelEdit={this.cancelEdit}
                setButtonStatus2={this.setButtonStatus2}
                toEditPage={this.toEditPage}
                setUpLoaderRef={this.setUpLoaderRef}
                getRef={this.getRef}
                MultiInit={this.props.MultiInit}
                disableUpload={disableUpload}
                pageHeight={pageHeight}
                photoRequired={photoRequired}
                photoConf={photoConf}
            />
        );
    }
}
